<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./boostarp/css/bootstrap.css">
  <script src="./vue/index.js"></script>
  <title>拼图</title>
</head>
<body>
  <div id="app">
    <div class="game_container">
      <div class="game_select" style="text-align: center;" v-show="!isStart">
        <h1>点击下方按钮添加拼图图片开始游戏</h1>
        <p>ts-3.0</p>
        <div style="display: flex;justify-content: center;">
          <input class="btn btn-primary btn-lg" href="#" role="button" type="file">
        </div>
        <h3>或者选择游戏内置图片进行游戏</h3>
        <div class="box-center" style="width: 80%;margin-top: 50px;">
          <div class="row">
            <div class="col hover_img" style="width: 30px;height: 400px;" @click="selectImgHandle('0')">
              <img src="./img/img1.jpeg" alt="" style="width: 100%;height: 100%;">
            </div>
            <div class="col hover_img" style="width: 30px;height: 400px;" @click="selectImgHandle('1')">
              <img src="./img/img2.jpeg" alt="" style="width: 100%;height: 100%;">
            </div>
            <div class="col hover_img" style="width: 30px;height: 400px;" @click="selectImgHandle('2')">
              <img src="./img/img3.jpeg" alt="" style="width: 100%;height: 100%;">
            </div>
          </div>
        </div>
      </div>

      <div class="game_start" v-show="isStart">
        <div class="top">
          <div class="top_left">
            <button type="button" class="btn btn-outline-primary" @click="backToHome">我不想玩了，我柜子动了</button>
          </div>
          <div class="top_right">
            <button type="button" class="btn btn-outline-info">这关太难了，我要/remake</button>
          </div>
        </div>

        <hr>

        <div class="mid">
          <div id="game_content">
             <!-- <img :src="selectImgSrc" alt="" style="height: 640px;width: 500px;"> -->
          </div>
        </div>
        <div class="foot">
        </div>
      </div>

    </div>
    
    <div id="data" v-show="false">{{selectImgSrc}}</div>
    
  </div>

<script>

  const { createApp } = Vue

  createApp({
    data() {
      return {
        isStart: false,
        isSelectLocalImg: false,
        selectImgSrc: '',
      }
    },
    methods: {
      selectImgHandle(index) {
        if (index === '0') {
          this.selectImgSrc = 'img/img1.jpeg'
        } else if (index === '1') {
          this.selectImgSrc = 'img/img2.jpeg'
        } else if (index === '2') {
          this.selectImgSrc = 'img/img3.jpeg'
        }
        this.isSelectLocalImg = true
        this.isStart = true
      },
      backToHome() {
        location.reload();
      },
      initData() {
        this.isStart = false
        this.isSelectLocalImg = false
        this.selectImgSrc = ''
      },
    }
  }).mount('#app')
</script>
<script src="./index.js"></script>
</body>

</html>